<template>
  <a-drawer popup-container="#wrap" width="500px" :visible="show" :ok-loading="form.loading" @ok="submit"
    @cancel="show = false" unmountOnClose>
    <template #title>
      {{ $t('components.updata.60ze8dw92940') }}
    </template>
    <div class="table-info">
      <a-form ref="formRef" :model="form.data" @submit="submit" layout="vertical">
        <a-form-item field="name" :label="$t('components.updata.60ze8dw93d80')"
          :rules="[{ required: true, message: $t('components.updata.60ze8dw93kc0') }]">
          <a-input v-model="form.data.name" :placeholder="$t('components.updata.60ze8dw93kc0')" />
        </a-form-item>
        <a-form-item field="pid" :label="$t('components.updata.60ze8dw93og0')">
          <a-tree-select :data="permission" :placeholder="$t('components.updata.60ze8dw93sg0')" :fieldNames="{
            key: 'id',
            title: 'name',
            children: 'children'
          }" :fallback-option="false" v-model="form.data.pid"></a-tree-select>
        </a-form-item>
        <a-form-item field="isMenu" :label="$t('components.updata.60ze8dw93y40')">
          <a-radio-group v-model="form.data.type">
            <a-radio :value="0">{{ $t('components.updata.60ze8dw942c0') }}</a-radio>
            <a-radio :value="1">{{ $t('components.updata.60ze8dw946o0') }}</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="icon" hide-label :content-flex="false">
          <div style="width: 100%;padding: 5px 0;display: flex;align-items: center;">
            <div>{{ $t('components.updata.60ze8dw94bs0') }}</div>
            <span v-if="form.data.icon" style="margin-left: 10px;color: rgb(var(--arcoblue-6));">
              <component :is="form.data.icon"></component>
            </span>
          </div>
          <div class="iconList">
            <div class="iconItem" @click="form.data.icon = (form.data.icon == item ? '' : item)"
              :class="{ active: form.data.icon == item }" v-for="item in icons">
              <component :is="item"></component>
            </div>
          </div>
        </a-form-item>
        <a-form-item field="url" :label="$t('components.updata.60ze8dw94ho0')">
          <a-input v-model="form.data.url" :placeholder="$t('components.updata.60ze8dw94lg0')" />
        </a-form-item>
        <a-form-item field="method" :label="$t('components.updata.60ze8dw94q00')">
          <a-select allow-clear v-model="form.data.method" :placeholder="$t('components.updata.60ze8dw94x00')">
            <a-option v-for="item in ['get', 'post', 'put', 'delete']" :value="item">{{ item
              }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="key" :label="$t('components.updata.60ze8dw952c0')"
          :rules="[{ required: true, message: $t('components.updata.60ze8dw956k0') }]">
          <a-input v-model="form.data.key" :placeholder="$t('components.updata.60ze8dw956k0')" />
        </a-form-item>
        <a-form-item field="status" :label="$t('components.create.60zemc8cc6s0')">
          <a-switch :checked-value="0" :unchecked-value="1" v-model="form.data.status" />
        </a-form-item>
        <a-form-item field="radius" :label="$t('components.updata.60ze8dw95ko0')" v-model="form.data.sort"
          :rules="[{ type: 'number', min: 0 }]">
          <a-input-number v-model="form.data.sort"></a-input-number>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script lang='ts' setup>
import { defineModel } from 'vue'
import { apiAuthUpdate } from '@/api/setting'
const show = defineModel('show', { default: false })
// const id = defineModel('id', { default: 0 })
const list = defineModel('list', { default: [] })
const detail: any = defineModel('data', { default: {} })
const formRef = ref()
const emit = defineEmits(['refresh'])
const form = reactive({
  data: {
    id: '',
    pid: '',
    name: '',
    key: '',
    url: '',
    method: '',
    type: 0,
    status: '',
    sort: 0,
    icon: ''
  },
  loading: false,
})
const icons = ['icon-home', 'icon-cloud', 'icon-public', 'icon-archive', 'icon-calendar-clock',
  'icon-computer', 'icon-settings', 'icon-bar-chart', 'icon-common', 'icon-layers', 'icon-loading',
  'icon-language', 'icon-notification', 'icon-refresh', 'icon-sun', 'icon-moon', 'icon-storage',
  'icon-plus', 'icon-tool', 'icon-printer', 'icon-nav', 'icon-lock', 'icon-location', 'icon-empty',
  'icon-command', 'icon-computer', 'icon-bar-chart', 'icon-fullscreen-exit', 'icon-fullscreen',
  'icon-copy', 'icon-filter', 'icon-delete', 'icon-edit', 'icon-search', 'icon-more']
const submit = async () => {
  const validate = await formRef.value?.validate()
  if (validate) return;
  form.loading = true
  const { code } = await apiAuthUpdate({
    ...form.data,
  })
  form.loading = false
  if (code != 200) return;
  emit('refresh')
  formRef.value?.resetFields()
  show.value = false
  useField.exclude(form.data, ['adminCount'])
}
useWatch(show, (val: any) => {
  if (val) {
    delete detail.value.children
    form.data = {
      ...detail.value,
    }
  } else {
    formRef.value?.resetFields()
  }
})
const filterAuths = (authList: any) => {
  const filteredAuth = authList?.map((auth: any) => {
    auth.menuIcon = auth.icon;
    delete auth.icon
    if (auth?.children?.length) {
      auth.children = filterAuths(auth.children);
    }
    return auth
  })
  return filteredAuth
}
const permission = computed(() => {
  return filterAuths(cloneDeep(list.value))
})
</script>

<style scoped>
.iconList {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  /* height: 100px; */
  overflow: auto;

  .iconItem {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;

    &:hover {
      background-color: var(--main-hover-color);
    }

    &.active {
      border: 1px solid rgb(var(--arcoblue-6));
    }
  }
}
</style>